<!--
 * @Author: chunlai
 * @Date: 2025-11-17 16:42:45
 * @LastEditTime: 2025-11-27 09:01:56
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\renewal\components\LiBaoRisk.vue
 * @Description: 
-->
<template>
  <div class="insuPlan2">
    <div class="cellItem">
      <div class="insuName">
        <span class="zhu-icon">主</span>
        <div class="ftc9">
          <span class="proname">{{ insuData.productName }}</span>
          <div class="sb_tips" v-if="insuData.errorTip">
            {{ insuData.errorTip }}
          </div>
        </div>
      </div>
    </div>
    <!-- 计划选择(常规+大类选择) -->
    <div class="cell3_main" v-if="insuData.plansList">
      <div class="cell4Item">
        <div class="flex_ac cell4_label">计划选择</div>
        <div class="cell4_value mt6">
          <MsRadio
            :curVal="insuData.planCode"
            :arrList="insuData.plansList"
            btnType="planCode"
            flexName="gap"
            @clickEvent="(e, t) => changDatas(t, e.value)"
          />
        </div>
        <div class="mt6" v-if="insuData.planDescCont">
          <div class="ftc13 ft12" v-html="insuData.planDescCont"></div>
        </div>
      </div>
    </div>
    <!-- 交费期间-1 -->
    <div class="cell3_main">
      <div class="cell3Item">
        <div class="cell3_label">交费期间</div>
        <div class="cell3_value">
          <div class="txt_check">
            {{ insuData.payendyear | payendYearName }}
          </div>
        </div>
      </div>
    </div>
    <!-- 保险期间-1 -->
    <div class="cell3_main">
      <div class="cell3Item">
        <div class="cell3_label">保险期间</div>
        <div class="cell3_value">
          <div class="txt_check">
            {{ insuData.insuYear | insureYearName(insuData.insuYearType) }}
          </div>
        </div>
      </div>
    </div>
    <!-- 保费(显示:1,规则:0)-1 -->
    <div class="cell3_main">
      <div class="cell3Item">
        <div class="cell3_label">首年保费</div>
        <div class="cell3_value">
          <div class="txt_check to_text">{{ insuData.prem || "0" }}元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "LiBaoRisk",
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      prePlanNowCode: "renewal/prePlanNowCode",
    }),
    insuData() {
      let res = {};
      if (this.mainInsu && this.mainInsu.length > 0) {
        res = this.mainInsu[0];
      }
      return res;
    },
  },
  created() {},
  mounted() {},
  methods: {
    changDatas(type, val) {
      if (val > this.prePlanNowCode) {
        this.$toast(`该续保计划不可选`);
        return;
      }
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: type,
        val: val,
      });
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
.insuPlan2 {
  margin-top: 10px;
}
.proname {
  line-height: 18px;
  font-family: sans-serif, Helvetica, Arial, Avenir;
}

.cellItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px;
}

.insuName {
  font-size: 16px;
  flex: 1;
  position: relative;
  display: flex;
  line-height: 18px;

  .zhu-icon {
    display: flex;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #ffffff;
    border-radius: 0px 4px 4px 4px;
    margin-right: 4px;
  }

  .zhu-icon {
    background: rgba(245, 64, 64, 1);
  }
}

.sb_tips {
  color: rgba(116, 116, 116, 1);
  font-size: 15px;
  padding-top: 5px;
}

.cell3_main {
  padding: 0 12px;
}
.cell3Item {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  min-height: 40px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }

  .cell3_label {
    display: flex;
    width: 80px;
    line-height: 26px;
    color: #747474;
    &.label2 {
      line-height: 1.3;
    }
  }

  .cell3_value {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 90px);
  }
  .cell2_value {
    width: calc(100% - 90px);
  }
}
.cell4Item {
  padding: 7px 0;
  min-height: 40px;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }
  .cell4_label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: #747474;
  }

  .cell4_value {
    width: 100%;
  }
}

.txt_check {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #f54040;
  border-radius: 2px;
  background: #fff0f0;
  position: relative;
  &::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid #f54040;
  }
  &.to_text {
    color: #1b1b1b;
    background: #fff;
    &::after {
      display: none;
    }
  }
}
</style>
